<template>
	<view class="base-component">
		<!--轮播图-->
		<template v-if="record.type == 'carousel'">
			<swiper :indicator-dots="true" :autoplay="autoplay" :interval="record.options.timeInterval*1000"
			 class="home-banner-swiper" :display-multiple-items="!record.options.displayMultipleItems?1:record.options.displayMultipleItems"
			 :style="{height:!record.options.height?'360rpx':$util.calculateWidthAndHeight(record.options.height)}"
			 :circular="true" indicator-color="#C0C0C0" indicator-active-color="#656766" @touchstart="autoplay=false">
				<swiper-item v-for="(child,key) in record.options.fileList" :key="key" @tap="jumpToPage(child)">
					<image :src="baseUrl+child.url" class="home-slide-image" mode="scaleToFill"
					 :style="{height:!record.options.height?'360rpx':$util.calculateWidthAndHeight(record.options.height)}"/>
				</swiper-item>
			</swiper>
		</template>
		<!--热区-->
		<template v-else-if="record.type == 'hotZone'">
			<view style="position: relative;">
				<view v-for="(item,index) in record.options.fileList" :key="index" class="hot-zone-list">
					<image :src="baseUrl+item.url" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view v-for="(item,index) in record.options.hotZoneList" :key="index" class="hot-click">
					<view class="hot-zone" :style="{width:$util.calculateWidthAndHeight(item.width),height:$util.calculateWidthAndHeight(item.height),left:$util.calculateWidthAndHeight(item.left),top:$util.calculateWidthAndHeight(item.top)}"
					@tap="jumpToPage(item)"></view>
				</view>
			</view>
		</template>
		<!--搜索模块-->
		<template v-else-if="record.type == 'search'">
			<view class="base-search-header"
				@tap="navTo('/packageA/pages/productList/productList?selectedIndex=0')">
				<view class="notice-box" @tap="navTo('/packageB/pages/noticePage/noticePage', { login: true })">
					<view class="iconfont iconlingdang notice"></view>
					<text v-if="unReadFlag" class="point"></text>
				</view>
				<view class="search">
					<view class="iconfont iconsousuohome search-icon"></view>
					<view class="home-search-text">搜索商品名称</view>
					<view class="search-black">搜索</view>
				</view>
			</view>
		</template>
		<!--分隔线-->
		<template v-else-if="record.type === 'separator'">
			<view class="separator-wrapper" :style="{backgroundColor:record.options.backgroundColor}">
				<view class="separator-line" :style="{borderColor:record.options.borderColor,borderStyle:record.options.radioVal}">
				</view>
			</view>
		</template>
		<!--直播-->
		<template v-else-if="record.type == 'live'">
			<image v-if="record.options.fileList.length > 0&&record.options.radioVal == 'topRight'" :style="{top:(isSearch?'100rpx':'0')}" class="live-top-right" :src="baseUrl+record.options.fileList[0].url" mode="aspectFill"
			@tap="jumpToLiveRoom"></image>
			<image v-if="record.options.fileList.length > 0&&record.options.radioVal != 'topRight'" class="live-bottom-right" :src="baseUrl+record.options.fileList[0].url" mode="aspectFill"
			@tap="jumpToLiveRoom"></image>
		</template>
		<!--文本-->
		<template v-else-if="record.type == 'text'">
			<!--rich-text多端兼容-->
			<rich-text v-if="record.options.radioVal == 'auto'" :nodes="record.options.innerHtml"></rich-text>
			<uni-notice-bar v-if="record.options.radioVal == 'scroll'"
				:speed="50" :showIcon="true" :scrollable="true" background-color="#fff" color="#EA655E" :text="record.options.innerText"/>
		</template>
		<!--标题栏-->
		<template v-else-if="record.type == 'title'">
			<view class="title-component" :style="{color:record.options.nameColor,fontSize:record.options.fontSize + 'rpx',backgroundColor:record.options.background,fontWeight:record.options.fontWeight}">
				<template v-if="record.options.radioVal == '0'">{{ record.options.titleName }}</template>
				<!-- 查看更多、箭头-->
				<view v-if="['1','2'].includes(record.options.radioVal)" class="more-wrapper">
				    <view class="left">
				        <span class="left-block" :style="{background: record.options.lineColor}"></span>
				        <span>{{ record.options.titleName }}</span>
				    </view>
					<view class="right" :style="{color: record.options.color}" @tap="jumpToPage(record.options)">
						<template v-if="record.options.radioVal == '1'">查看更多</template>
						<template v-if="record.options.radioVal == '2'"><i class="iconfont iconxiangyou"></i></template>
					</view>
				</view>
			</view>
		</template>
		<!--商品-->
		<template v-else-if="record.type == 'product'">
			<view v-if="record.options.goodList.length > 0" class="good-wrapper">
				<view v-for="(item,index) in record.options.goodList" :key="index" class="good-list" @tap="jumpToGoodDetail(item)">
				    <view class="good-box">
						<image class="good-image" v-if="item.productThumbnailImageUrl" :src="baseUrl+item.productThumbnailImageUrl" mode="aspectFill"></image>
				        <image class="good-image" v-if="!item.productThumbnailImageUrl" src="/static/img/nulldata.svg" mode="aspectFill"></image>
						<view class="price-box">
				            <view class="right">{{ item.productName }}</view>
							<!-- <view class="product-desc">{{item.productDesc}}</view> -->
				        </view>
				        <view class="real-price">￥{{ item.productPrice?item.productPrice:0 }}</view>
				    </view>
				</view>
			</view>
		</template>
		<!--视频-->
		<template v-else-if="record.type == 'video'">
			<template v-if="record.options.imgList.length > 0&&record.options.videoList.length > 0">
				<video style="width:100%;" :poster="baseUrl+record.options.imgList[0].url" show-center-play-btn
				:src="baseUrl+record.options.videoList[0].url"></video>
			</template>
			<template v-if="record.options.imgList.length == 0&&record.options.videoList.length > 0">
				<video style="width:100%;" show-center-play-btn
				:src="baseUrl+record.options.videoList[0].url"></video>
			</template>
			
		</template>
		<!--倒计时-->
		<template v-else-if="record.type == 'countDown'">
			<view v-if="record.options.backgroundTag == 'color'" class="count-down-wrapper" :style="{backgroundColor:record.options.background,color:record.options.color}">
			    <!-- <tui-countdown :isDay="record.options.isDay" :currentTime="record.options.time"></tui-countdown> -->
			</view>
			<view v-if="record.options.backgroundTag != 'color'&&record.options.fileList.length > 0 " class="count-down-wrapper"
			    :style="{backgroundImage: 'url(' + baseUrl +record.options.fileList[0].url + ')', backgroundSize:'cover',color:record.options.color}">
			    <!-- <tui-countdown :isDay="record.options.isDay" :currentTime="record.options.time"></tui-countdown> -->
			</view>
		</template>
		<auto-receive-coupon :show.sync="showCoupon" :idList.sync="couponIdList"></auto-receive-coupon>
	</view>
</template>

<script>
	// import tuiCountdown from '../tui-countdown/tui-countdown.vue'
	import uniNoticeBar from '../uni-notice-bar/uni-notice-bar.vue'
	import autoReceiveCoupon from '../autoReceiveCoupon/autoReceiveCoupon.vue'
	
	export default {
		props:{
			record:{
				type: Object
			},
			selectedIndex:{
				type: Number,
				default:0,
			},
			isSearch: {
				type: Boolean,
				default: false
			},
		},
		components:{
			// tuiCountdown,
			uniNoticeBar,
			autoReceiveCoupon
		},
		data(){
			return{
				autoplay:true,
				showCoupon: false,
				couponIdList: [],//优惠券id列表
				inputVal: '',
				baseUrl:this.$store.state.imgUrl,
				unReadFlag: false,//是否有未读消息
			}
		},
		mounted() {
			this.$nextTick(function(){
				if(this.record&&this.record.type == 'search') {
					this.unRead();
				}
			})
		},
		methods:{
			unRead() {//我的消息未读
				this.$http.unRead().then(res => {
					if (res.status === 0) {
						this.unReadFlag = !res.data.isReadedFlag;
					}
				});
			},
			
			
			jumpToLiveRoom() {
				let h5Url='';
				let appUrl='';//APP和小程序端使用的基础版的地址
				if(this.$store.state.dictDataAll&&this.$store.state.dictDataAll.mengzhu){
					let urlArrr=this.$store.state.dictDataAll.mengzhu
					urlArrr.forEach(item=>{
						if(item.dictLabelEn=='base'){
							appUrl=item.dictValue;
							
						}else{
							h5Url=item.dictValue;
						}
					})
				}
				// #ifdef H5
				window.location.href = h5Url;
				// #endif
				// #ifndef H5
				uni.navigateTo({
					url:`/packageA/pages/liveroom/liveroom?appUrl=${encodeURIComponent(appUrl)}`
				})
				// #endif
			},
			jumpToGoodDetail(item) {
				// 商品详情
				this.$util.gotoGoodsDetail('productId', item.productId);
			},
			jumpToPage(item) {
				console.log(item)
				if(item.id) {
					if(item.type == 0) {
						// 商品分组
						uni.navigateTo({
							// url: `/pages/other/productList/productList?selectedIndex=${this.selectedIndex}`
							url: `/pages/category/category?subCategoryId=${item.id}`
						})
					} else if(item.type == 1) {
						// 商品详情
						this.$util.gotoGoodsDetail('productId', item.id);
					} else if(item.type == 2) {
						// 固定页面
						if(item.id == '/packageA/pages/liveroom/liveroom') {
							this.jumpToLiveRoom();
							// // 直播页面
							// // #ifdef H5
							// window.location.href = 'https://v.zmengzhu.com/play/10192830?i=10432645&ticket_id=10192830&mod=play';
							// // #endif
							// // #ifndef H5
							// uni.navigateTo({
							// 	url:`/packageA/pages/liveroom/liveroom`
							// })
							// // #endif
							
						} else if(item.id == '/packageD/pages/homePage/homePage') {
							let stopFunctionArr = this.$store.state.dictDataAll['stopFunction'];
							let stopFunItem1 = null; //当前对象
							let stopFunItem2 = null; //message对象
							let stopFunItemArr = stopFunctionArr.filter((item) => {
								return (item.dictLabel == 'function6' || item.dictLabel ==
									'message')
							});
							if (stopFunItemArr[0].dictLabel == 'function6') {
								stopFunItem1 = stopFunItemArr[0];
								stopFunItem2 = stopFunItemArr[1];
							} else {
								stopFunItem2 = stopFunItemArr[0];
								stopFunItem1 = stopFunItemArr[1];
							}
							
							if (stopFunItem1.dictValue == '0') { //开启
							
								// 积分商城
								// if(uni.getStorageSync('orgLv') == 'jxs') {
								// 	uni.navigateTo({
								// 		url:'/packageD/pages/homePage/homePage'
								// 	})
								// } else {
								// 	uni.navigateTo({
								// 		url:'/packageD/pages/homePage/nonAgentHome'
								// 	})
								// }
								
								// uni.navigateTo({
								// 	url: '/packageD/pages/homePage/nonAgentHome'
								// })
								uni.navigateTo({
									url: '/packageG/pages/address/addressEdit'
								})
							} else { //关闭
								let titleTips = stopFunItem2.dictValue
								uni.showToast({
									icon: 'none',
									title: titleTips,
									duration: 2000,
								})
							}
							
						} else if(item.id == '/packageB/pages/growthPark/growthPark') {
							//成长乐园
							uni.navigateTo({
								url:'/packageB/pages/commingSoon/commingSoon?title=成长乐园'
							})
						} else if(item.id == '/packageB/pages/loveWelfare/loveWelfare') {
							//爱心公益
							uni.navigateTo({
								url:'/packageB/pages/commingSoon/commingSoon?title=爱心公益'
							})
						} else if(item.id == '/packageB/pages/luckyFlop/luckyFlop') {
							//幸运翻牌
							uni.navigateTo({
								url:'/packageB/pages/commingSoon/commingSoon?title=幸运翻牌'
							})
						} else if(item.id == '/packageC/pages/indexPage/indexPage') {//店铺管理
							// #ifdef H5
							if (this.$wechat.isIOS()) {
								window.location.href = '/h5/packageC/pages/indexPage/indexPage'
							} else {
								uni.navigateTo({
									url:'/packageC/pages/indexPage/indexPage'
								})
							}
							// #endif
							// #ifndef H5
							uni.navigateTo({
								url:'/packageC/pages/indexPage/indexPage'
							})
							// #endif
						
						} else {
							uni.navigateTo({
								url:`${item.id}`
							})
						}
					} else if (item.type == 3) {
						// 套餐详情
						this.$util.gotoGoodsDetail('suitId', item.id);
					} else if(item.type == 4) {
						// 活动页面
						uni.navigateTo({
							// url: `/pages/other/activityPage/activityPage?id=${item.id}`
							url:`/packageA/pages/activityPage/activityPage?id=${item.id}`
						})
						
					} else if (item.type == 5) {
						// 优惠券
						const couponId = item.id.split(',');
						this.couponIdList = couponId;
						this.showCoupon = true;
					} else if(item.type == 6) {
						// 砸金蛋
						uni.navigateTo({
							url:`/packageE/pages/goldenegg/goldenegg?eggsId=${item.id}`
						})
					}
				}
				
			},
		}
	}
</script>

<style lang="scss">
	.base-component {
		// background-color: #fff;
		.home-slide-image {
			width: 100%;
			// height: 360rpx;
		}
		.base-search-header {
			width: 100%;
			height: 90rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
		
			.notice-box {
				position: relative;
		
				.notice {
					font-size: 48rpx;
					margin-right: 20rpx;
					color: #656766;
				}
		
				.point {
					width: 14rpx;
					height: 14rpx;
					background-color: #656766;
					border-radius: 50%;
					display: block;
					position: absolute;
					top: 0;
					right: 8px;
				}
			}
		
			.search {
				width: 100%;
				height: 60rpx;
				padding: 0 0 0 16rpx;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				color: #999;
				border-radius: 16rpx;
				border: 1px solid #ABABAB;
				border-right: none;
		
				.search-icon {
					color: #9C9C9C;
					font-weight: 600;
					margin-right: 18rpx;
				}
		
				.home-search-text {
					flex: 1;
					font-size: 28rpx;
					color: #A0A0A0;
				}
		
				.search-black {
					font-size: 28rpx;
					height: 100%;
					padding: 0 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #656766;
					border-radius: 16rpx;
					color: #fff;
				}
			}
		}
		.home-rolling-search {
			width: 100%;
			height: 60rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #fff;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			color: #999;
			border-radius: 50rpx;
			border: 1px solid #ED716A;
			.home-search-text{
				font-size: 26rpx;
				color: #CCCCCCFF;
			}
		}
		// 热区
		.hot-zone {
			position: absolute;
			// background-color: red;
		}
		// 轮播
		.home-banner-swiper {
			width: 100%;
			// height: 360rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}
		// 分隔线 
		.separator-wrapper {
			padding: 10rpx;
			.separator-line {
				border: 2rpx solid;
				height: 50%;
				width: 100%;
			}
		}
		// 倒计时
		.count-down-wrapper {
			display: flex;
			font-size: 24rpx;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			text-align: center;
		}
		// 直播
		.live-top-right {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			position: fixed;
			top: 0;
			right: 0;
			z-index: 99999;
		}
		.live-bottom-right {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			position: fixed;
			bottom: 98rpx;
			margin-bottom: env(safe-area-inset-bottom);
			right:0;
			z-index: 99999;
		}
		// 滚动消息
		.tui-notice-board {
			width: 100%;
			padding-right: 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			height: 60rpx;
			background: linear-gradient(6deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
			display: flex;
			align-items: center;
		}
		.tui-animation {
			-webkit-animation: tui-rolling 12s linear infinite;
			animation: tui-rolling 12s linear infinite;
		}
		@keyframes tui-rolling {
			0% {
				transform: translate3d(100%, 0, 0);
			}
		
			100% {
				transform: translate3d(-170%, 0, 0);
			}
		}
		// 标题栏
		.title-component {
		    height: 100rpx;
		    line-height: 100rpx;
		    color: #000000;
		    border: 1px solid #DCDFE6;
		    text-align: center;
		    .more-wrapper {
		      display: flex;
		      justify-content: center;
		      padding: 10rpx;
		      box-sizing: border-box;
		      height: 100%;
		      align-items: center;
		      .left{
		        display: flex;
		        width: 80%;
		        height: 100%;
		        align-items: center;
		        .left-block {
		          width: 10rpx;
		          height: 60%;
		          margin-right: 20rpx;
		        }
		      }
		      .right {
		        width: 20%;
		        text-align: right;
		      }
		    }
		}
		// 商品列表
		.good-wrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background: #fff;
			padding: 20rpx 20rpx 0 20rpx;
			.good-list {
				margin-bottom: 20rpx;
				background: #fff;
				padding: 12rpx 12rpx 20rpx 12rpx;
				border-radius: 18rpx;
				box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(143, 97, 95, 0.1);
				width: 48.5%;
				&:nth-child(2n-1){
					margin-right: 10rpx;
				}
				.good-box {
					width: 100%;
					height: 100%;
					.good-image {
						width: 100%;
						height: 200rpx;
						border-radius: 8rpx;
						margin-bottom: 8rpx;
					}
					.right {
						color: #121212;
						font-size: 26rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						height: 80rpx;
						line-height: 42rpx;
						// font-weight: bold;
						// margin: 8rpx 0 6rpx 0;
					}
					.product-desc {
						font-size: 22rpx;
						color: #121212;
						height: 44rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.real-price {
						color: #E8374A;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
